
<template>
    <el-container>
        <el-aside width="200px">
            <el-row class="tac">
                <el-col>
                    <el-menu
                            class="el-menu-vertical-demo"
                            @open="handleOpen"
                            @close="handleClose"
                            background-color=" #182450"
                            text-color="#fff"
                            active-text-color="#ffd04b"
                            width="200px"
                            unique open>
                        <el-submenu style="width:100%">
                            <template slot="title" :float="false" >
                                <i class="el-icon-setting"></i><span>设备监管</span>
                            </template>

                            <el-menu-item index="1-1"><i class="el-icon-guide"></i>已安装管理</el-menu-item>
                            <el-menu-item index="1-2"><i class="el-icon-cpu"></i>设备列表</el-menu-item>
                            <el-menu-item index="1-3"><i class="el-icon-bank-card"></i>传统火灾报警系统</el-menu-item>
                            <el-menu-item index="1-4"><i class="el-icon-eleme"></i>站点列表</el-menu-item>
                            <el-menu-item index="1-5"><i class="el-icon-school"></i>楼层管理</el-menu-item>
                            <el-menu-item index="1-6"><i class="el-icon-user"></i>联系人管理</el-menu-item>
                            <el-menu-item index="1-7"><i class="el-icon-pie-chart"></i>设备统计</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-col>
            </el-row>
        </el-aside>
        <!--        导航-->

        <el-container>
            <el-main>

                <span style="color: white;font-size: 18px;font-weight: 700">常用联系人</span>
                <div style="margin-top: 20px">
                    <el-form inline="true" :model="formInline" ref="formInline" class="demo-formInline"  >
                        <el-form-item label="所属单位" prop="region">
                            <el-cascader v-model="formInline.region" placeholder="请选择 所属单位"
                                         :options="options" filterable clearable  :props="{ checkStrictly: true }"
                                         :show-all-levels="false"></el-cascader>
                        </el-form-item>
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="formInline.name" placeholder="请输入 姓名" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="电话" prop="phone">
                            <el-input v-model="formInline.phone" placeholder="请输入 电话" clearable></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" @click="onSubmit">搜索</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-delete" @click="resetForm('formInline')">清空</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <!--        表单   -->

                <div>
                    <el-button type="primary" size="small" @click="addform"> +  新增 </el-button>
                    <el-dialog title="新增" :visible.sync="dialogFormVisibleadd" >
                        <el-divider></el-divider>
                        <el-form inline="true" :model="add" ref="add" :rules="rulesadd" label-width="100px"
                                 text-color="#fff" border>
                            <el-form-item label="添加至单位:"prop="unit">
                                <el-cascader v-model="add.unit" placeholder="请选择 添加至单位"
                                             :options="options" filterable clearable  :props="{ checkStrictly: true }"
                                             :show-all-levels="false"></el-cascader>
                            </el-form-item>
                            <el-form-item label="姓名" prop="name">
                                <el-input v-model="add.name" clearable placeholder="请输入 姓名"></el-input>
                            </el-form-item>
                            <el-form-item label="电话" prop="phone">
                                <el-input v-model="add.phone" clearable placeholder="请输入 电话"></el-input>
                            </el-form-item>
                            <div>
                                <el-form-item label="微信通知" >
                                    关闭 <el-switch v-model="add.WeChat"></el-switch> 开启
                                </el-form-item>
                                <el-form-item label="短信通知" prop="note" :formatter="stateFormat">
                                    关闭 <el-switch v-model="add.note"></el-switch> 开启
                                </el-form-item>
                                <el-form-item label="语音通知">
                                    关闭 <el-switch v-model="add.voice"></el-switch> 开启
                                </el-form-item>
                            </div>
                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button type="primary" icon="el-icon-circle-plus-outline"
                                       @click="submitForm">保 存</el-button>
                            <el-button type="primary"  icon="el-icon-circle-close"
                                       @click="resetForm('add')">取 消</el-button>
                        </div>
                    </el-dialog>
                    <!--        新增   -->

                    <el-button type="primary" icon="el-icon-download" circle size="small"
                               @click="dialogVisibledownload = true" style="position: absolute;left:1180px"></el-button>
                    <el-dialog title="导出" :visible.sync="dialogVisibledownload" width="30%">
                        <el-divider></el-divider>
                        <el-form  :model="download" ref="download" label-width="80px">
                            <el-form-item label="文件名" prop="filename">
                                <el-input v-model="download.filename" clearable placeholder="请输入 文件名"></el-input>
                            </el-form-item>

                            <el-form-item label="数据" prop="date">
                                <el-select v-model="download.date" filterable clearable placeholder="请选择 数据">
                                    <el-option
                                            v-for="item in dateoptions"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                            :disabled="item.disabled">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="字段" prop="field">
                                <el-select v-model="download.field" filterable  multiple clearable placeholder="请选择 字段">
                                    <el-option
                                            v-for="item in fieldoptions"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="参数" prop="checkList">
                                <el-checkbox-group v-model="checkList">
                                    <el-checkbox label="表头" disabled></el-checkbox>
                                    <el-checkbox label="数据源"></el-checkbox>
                                    <el-checkbox label="复杂表头" disabled></el-checkbox>
                                    <el-checkbox label="合计统计" disabled></el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                        </el-form>

                        <span slot="footer" class="dialog-footer">
                  <el-button type="primary" @click="handledownload">确 定</el-button>
                  <el-button type="primary" @click="resetForm('download')">取 消</el-button>
                </span>
                    </el-dialog>
                    <!--        下载-->

                    <el-button  type="primary" icon="el-icon-refresh" circle size="small"
                                style="position: absolute;left:1220px"></el-button>
                    <!--        刷新-->
                    <el-button @click="drawer = true" type="primary" icon="el-icon-s-operation" circle size="small"
                               style="position: absolute;left:1250px">
                    </el-button>
                    <el-drawer
                            title="我是标题"
                            :visible.sync="drawer"
                            :with-header="false">
                        <span>我来啦!</span>
                    </el-drawer>
                    <!--        抽屉  -->
                    <el-button  type="primary" icon="el-icon-search" circle size="small"
                                style="position: absolute;left:1300px"></el-button>
                    <!--        隐藏-->

                </div>

                <div  style="margin-top: 20px">
                    <el-table :data="tableData"
                              style="width: 99%"
                              :highlight-current-row="false"
                              :header-cell-style="{backgroundColor: '#3F51B5', color: '#fff', fontSize: '12px', textAlign: 'center' }"
                              :cell-style="{color: '#fff', fontSize: '11px', textAlign: 'center' }"
                              :row-class-name="tableRowClassName">
                        <el-table-column prop="unit" label="所属单位" width="200"></el-table-column>
                        <el-table-column prop="name" label="姓名" width="100"></el-table-column>
                        <el-table-column prop="phone" label="电话" width="120"></el-table-column>
                        <el-table-column prop="offical" label="是否关注公众号" width="200"></el-table-column>

                        <el-table-column
                                prop="WeChat"
                                label="微信通知"
                                width="100">
                        </el-table-column>
                        <el-table-column
                                prop="note"
                                label="短信通知"
                                width="100">
                        </el-table-column>
                        <el-table-column
                                prop="voice"
                                label="语音通知"
                                width="100">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button size="mini" type="primary" icon="el-icon-edit"
                                           @click="open(scope.$index, scope.row)">编辑</el-button>
                                <el-dialog title="编辑" :visible.sync="dialogVisibleEdit" highth="500px">
                                    <el-divider></el-divider>
                                    <el-form  inline="true" :model="form" ref="form" :rules="rulesEdit" label-width="80px">
                                        <el-form-item label="姓名" prop="name">
                                            <el-input v-model="form.name" clearable placeholder="请输入 姓名"></el-input>
                                        </el-form-item>
                                        <el-form-item label="电话" prop="phone">
                                            <el-input v-model="form.phone" clearable placeholder="请输入 电话"></el-input>
                                        </el-form-item>
                                        <el-form-item label="微信通知" prop="WeChat">
                                            关闭 <el-switch v-model="form.WeChat"></el-switch> 开启
                                        </el-form-item>
                                        <el-form-item label="短信通知" prop="note">
                                            关闭 <el-switch v-model="form.note"></el-switch> 开启
                                        </el-form-item>
                                        <el-form-item label="语音通知"prop="voice">
                                            关闭 <el-switch v-model="form.voice"></el-switch> 开启
                                        </el-form-item>
                                    </el-form>
                                    <div slot="footer" class="dialog-footer">
                                        <el-button type="primary"  icon="el-icon-circle-check"
                                                   @click="handleEdit(scope.$index, scope.row)">修 改</el-button>
                                        <el-button type="primary"  icon="el-icon-circle-close"
                                                   @click="resetForm('form')">取 消</el-button>
                                    </div>
                                </el-dialog>

                                <el-button size="mini" type="danger"  icon="el-icon-view"
                                           @click="dialogVisibleDelete = true ">删除</el-button>
                                <el-dialog
                                        title="提示"
                                        :visible.sync="dialogVisibleDelete"
                                        width="30%"
                                        text-color="#fff">
                                    <i class="el-icon-warning"></i>
                                    <span>删除站点, 是否继续?</span>
                                    <span slot="footer" class="dialog-footer">
                                <el-button type="primary" @click.native.prevent="deleteRow(scope.$index, tableData)">确 定</el-button>
                                <el-button @click="dialogVisibleDelete = false">取 消</el-button>
                            </span>
                                </el-dialog>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!--        表格 编辑 删除 -->
            </el-main>

            <el-footer>
                <div >
                    <span class="demonstration"></span>
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage4"
                            :page-sizes="[10, 20, 30, 40]"
                            :page-size="10"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="26"
                            style="position: absolute;left:1000px">
                    </el-pagination>
                </div>
                <!--        分页-->
            </el-footer>
        </el-container>
    </el-container>


</template>

<script>
    export default {
        data() {
            return {
                options: [
                    {value: '智慧消防远程监控平台', label: '智慧消防远程监控平台',
                        children: [{value: '朔州市消防大队', label: '朔州市消防大队',
                            children: [{value: '圣厚源大酒店', label: '圣厚源大酒店',
                                children: [{value: '圣厚源办公室', label: '圣厚源办公室'}]},
                                {value: '瑞明网络通信工程有限公司', label: '瑞明网络通信工程有限公司'}]},
                            {value: '瑞明网络通信工程有限公司', label: '瑞明网络通信工程有限公司',
                                children: [{value: '朔州市经济开发区管理委员会', label: '朔州市经济开发区管理委员会',
                                    children: [{value: '开发区环境局', label: '开发区环境局'},{value: '开发区建设局', label: '开发区建设局'}]},
                                    {value: '朔州市邮政储蓄银行', label: '朔州市邮政储蓄银行',
                                        children: [{value: '右玉县支行', label: '右玉县支行'},{value: '山阴县支行', label: '山阴县支行'}]},
                                    {value: '开发南路', label: '开发南路',
                                        children: [{value: '朔城区第三中学', label: '朔城区第三中学'}]},
                                    {value: '文远路街道', label: '文远路街道',
                                        children: [{value: '朔州今乔智慧公寓', label: '朔州今乔智慧公寓'},{value: '幸福家纺', label: '幸福家纺'}]}]}]}
                ],
                value: '',
                formInline: {
                    region: '',
                    name: '',
                    phone: ''
                },
                input: '',
                //表单
                dialogFormVisibleadd: false,
                add: {
                    name: '',
                    phone: '',
                    unit: '',
                    WeChat: '',
                    note: '',
                    voice: ''
                },
                rulesadd: {
                    unit: [{ required: true, message: '所属单位', trigger: 'change' }],
                    name: [{ required: true, message: '姓名', trigger: 'blur' }],
                    phone: [{ required: true, message: '请输入您的号码', trigger: 'blur' }]
                },
                //新增

                dialogVisibledownload: false,
                download: {
                    filename: '',
                    date: '',
                    field: ''},
                dateoptions: [{value: '选项1', label: '当前数据(当前页全部的数据)'},
                    {value: '选项2', label: '选中的数据(当前页选中的数据)', disabled: true}],
                value: '',
                fieldoptions: [{value: '选项1', label: '添加至单位'},
                    {value: '选项2', label: '所属单位'},
                    {value: '选项3', label: '姓名'},
                    {value: '选项4', label: '电话'},
                    {value: '选项5', label: '是否关注公众号'},
                    {value: '选项6', label: '微信通知'},
                    {value: '选项7', label: '短信通知'},
                    {value: '选项8', label: '语音通知'}],
                value: '',
                checkList:'' ,
                //下载

                drawer: false,//抽屉

                value1: true,
                tableData: [{
                    unit: '振华支行',
                    name: '王小虎',
                    phone: '123456',
                    offical: '已关注',
                    WeChat: '打开',
                    note: ' ',
                    voice: '',
                },
                    {
                        unit: '支行',
                        name: '小虎',
                        phone: '123456',
                        offical: ' ',
                        WeChat: '打开',
                        note: ' ',
                        voice: '',
                    },
                    {
                        unit: '幸福家纺',
                        name: '赵小虎',
                        phone: '123456789',
                        offical: '已关注',
                        WeChat: '打开',
                        note: '',
                        voice: '打开'}],
                form: {
                    unit: '',
                    name: '',
                    phone: '',
                    WeChat: '',
                    note: '',
                    voice: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''},//表格
                dialogVisibleEdit: false,//表格 编辑
                rulesEdit: {
                    name: [{ required: true, message: '姓名', trigger: 'blur' }],
                    phone: [{ required: true, message: '请输入您的号码', trigger: 'blur' }]
                },
                dialogVisibleDelete: false,//表格 删除

                currentPage1: 5,
                currentPage2: 5,
                currentPage3: 5,
                currentPage4: 4,//分页

            };
        },

        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },//导航

            onSubmit() {
                console.log('submit!');
                console.log(this.formInline);
            },//表单 搜索

            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.dialogFormVisibleadd = false
                this. dialogVisibledownload = false
                this. dialogVisibleEdit = false
            },//表单 重置

            addform(){
                this.add = {
                    name: '',
                    phone: '',
                    unit: '',
                    WeChat: '',
                    note: '',
                    voice: ''}
                this.dialogFormVisibleadd = true
            },
            submitForm() {
                this.add.unit=this.add.unit[this.add.unit.length-1]
                this.tableData.push(this.add) //向tableData中添加数据
                this.dialogFormVisibleadd = false
                console.log('submit!')
            },//新增

            handledownload(){

                this. dialogVisibledownload = false
            },//下载

            tableRowClassName({ row, rowIndex }) {
                if ((rowIndex + 1) % 2 === 0) {
                    return "warning-row";
                } else {
                    return "success-row";
                }
            }, //表格斑马纹

            open(idx,row) {
                this.dialogVisibleEdit = true;
                this.from.name=row.name;
                this.from.phone=row.phone;
                this.from.WeChat=row.WeChat;
                this.from.note=row.note;
                this.from.voice=row.voice;
            },
            handleEdit(index, row) {
                debugger
                console.log(index, row)
                this. dialogVisibleEdit = false
            }, //表格 编辑

            deleteRow(index, rows) {
                rows.splice(index, 1);
                this.dialogVisibleDelete = false;
            }, //表格 删除

            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }, //分页
        }
    }
</script>


<style>
    .el-aside {
        background-color: #182450;
        color: #333;
        height: 700px;}
    .el-header {
        background-color: #242E66;
        color: #333;
        height: 100px;}
    .el-main {
        background-color: #242E66;
        color: #333;
        height: 500px;}
    .el-footer {
        background-color: #242E66;
        color: #333;
        line-height: 100px;}
    .el-form-item__label {
        color: #fff;
        line-height: 40px;
        padding: 0 12px 0 0;
        box-sizing: border-box;
    }
    .el-dialog {
        position: relative;
        margin: 0 auto 50px;
        background:#242E66;
        border-radius: 2px;
        box-shadow: 0 1px 3px rgb(0 0 0  30%);
        box-sizing: border-box;
        width: 50%;
    }
    .el-dialog__title {
        line-height: 24px;
        font-size: 18px;
        color: #fff;
    }
    .el-pagination__total {
        margin-right: 10px;
        font-weight: 400;
        color: #fff;
    }
    .el-pagination__jump {
        margin-left: 24px;
        font-weight: 400;
        color: #fff;
    }
    .el-pagination__jump .el-input__inner {
        padding: 0 3px;
        background:#242E66;
    }
    .el-pagination {
        white-space: nowrap;
        padding: 2px 5px;
        color: #303133;
        font-weight: 700;
    }

    .el-table .warning-row {
        background:#384176;
    }
    /*斑马纹*/
    .el-table .success-row {
        background: #242E66;
    }
    /*斑马纹*/

    .el-table {
        border: none !important;
    }
    .el-table td, .el-table th {
        border:none !important;
    }
    /*表格线*/
    .el-table::before {
        left: 0;
        bottom: 0;
        width: 100%;
        height: 0px;
    }
    /*表格线*/
    .el-table tbody tr:hover>td {
        background: #242E66 !important;
    }
    /*表格鼠标悬浮*/
    .el-dialog__title {
        line-height: 20px;
        font-size: 18px;
        color: #fff;
    }
    /*弹窗*/
    .el-dialog__body {
        padding: 30px 20px;
        color: #fff;
        font-size: 16px;
        word-break: break-all;
    }
    /*弹窗*/
    /*表单*/
    .el-cascader .el-input .el-input__inner:focus, .el-cascader .el-input.is-focus .el-input__inner {
        background-color: #242E66;
    }
    .el-cascader .el-input .el-input__inner {
        text-overflow: ellipsis;
        background-color: #242E66;
    }

    .el-input--suffix .el-input__inner {
        padding-right: 30px;
        background-color: #242E66;
    }

    .el-cascader-menu__list {
        position: relative;
        min-height: 100%;
        margin: 0;
        padding: 6px 0;
        list-style: none;
        box-sizing: border-box;
        background-color: #242E66;
    }
    .el-cascader-node__label {
        color: #fff;
    }
    .el-cascader .el-input .el-input__inner:focus, .el-cascader .el-input.is-focus .el-input__inner {
        color: #fff;
    }
    .el-input__inner {
        color: #fff;
    }
    .el-pagination .btn-next, .el-pagination .btn-prev {
        background: center center no-repeat #FFF;
        background-size: 16px;
        cursor: pointer;
        margin: 0;
        color: #fff;
        background-color: #242E66;
    }
    .el-pagination .el-select .el-input .el-input__inner {
        padding-right: 25px;
        border-radius: 3px;
        color: #fff;
        background-color: #242E66;
    }
    .el-pager li {
        color: #fff;
        background-color: #242E66;
    }
    .el-pagination button:disabled {
        color: #fff;
        background-color: #242E66;
    }

    .el-select-dropdown__item {
        color: #fff;
        background-color: #242E66;
    }
    .el-select-dropdown__list {
        background-color: #242E66;
    }

</style>

